<template>
  <div class="bg-gray h-100 nav-no-scroll d-flex flex-column">
    <div class="bg-green py-2 px-4 d-flex">
      <el-input
         class="input-radius"
         placeholder="输入关键字"
         prefix-icon="el-icon-search"
         @focus="show = true"
         @blur="show = false"
         @keyup.enter.native="search()"
         v-model="keyword">
       </el-input>
       <el-button v-show="show" type="text ml-3 text-white" style="height: 30px;line-height: 30px;padding: 0;" @click="search">搜索</el-button>
    </div>
    <div class="span scroll-bg" v-loading="events.loading && events.pageIndex === 1">
      <scroll
            ref="scroll"
            :mouse-wheel="true"
            :pull-up-load="pullUpLoad"
            :scrollbar="true"
            @pullingUp="pullingUp"
            >
        <div class="card border-top border-bottom" style="border: none;" v-show="events.rows.length === 0">
          <div class="card-body text-center">
            <p>暂无数据</p>
          </div>
        </div>
        <div class="card border-gray-300" :class="{'border-bottom': index === events.rows.length - 1}" v-for="(item, index) in events.rows" :key="item.ctime" style="border: none;border-color: #dee2e6;margin-bottom: 10px;">
          <div class="card-body" style="padding: 12px;" @click="lookEvent(item)">
            <div class="d-flex">
              <div class="mr-3" style="width: 110px;">
                <div class="zoomImage" :style="{backgroundImage: 'url('+ getImgUrl(item.activityLogo, index) +')'}"></div>
              </div>
              <div class="content flex-all">
                <p class="fz-15 word-break" style="line-height: 18px;margin-bottom: 8px;color: #000;">{{item.activityTitle}}</p>
                <p class="fz-14 mb-0">活动状态：
                  <span :class="{'text-tdsuccess': getActivityStatus(item)[1], 'text-muted': !getActivityStatus(item)[1]}">{{getActivityStatus(item)[0]}}</span>
                </p>
                <p class="fz-14 mb-0">开始报名：
                  <span class="text-muted">{{$formatYMD(item.signStartTime, 'zh')}}</span>
                </p>
                <p class="fz-14 mb-0">截止报名：
                  <span class="text-muted">{{$formatYMD(item.signEndTime, 'zh')}}</span>
                </p>
                <p class="fz-14 mb-0">发布时间：
                  <span class="text-muted">{{$formatYMD(item.ctime, 'zh')}}</span>
                </p>
              </div>
            </div>
          </div>
        </div>
      </scroll>
    </div>
  </div>
</template>

<script>
import PagedList from '../../plugins/PagedList'

export default {
  name: "eventlist",
  title: "活动列表",
  data () {
    return {
      events: new PagedList('/mscs/activity/findActivityList', 10),
      pullUpLoad: {
        txt: {
          more: '加载更多',
          noMore: '没有了'
        }
      },
      keyword: '',
      show: false
    }
  },
  mounted () {
    this.search()
  },
  methods: {
    search() {
      this.events.search({search: this.keyword})
    },
    pullingUp () {
      if (!this.events.hasMore) {
        this.$refs.scroll.forceUpdate(this.events.hasMore)
        return
      }
      this.events.addLoad().then(() => {
        this.$refs.scroll.forceUpdate(this.events.hasMore)
      })
    },
    lookEvent (row) {
      // this.$router.push({name: 'eventdetails', query: {row: JSON.stringify(row)}})
      this.$router.push({name: 'eventdetails', query: {activityId: row.activityId}})
    },
    getImgUrl (url, index) {
      if (url) {
        return url
      }
      let i = index % 3
      if (i === 0) {
        return 'static/morenhuodongtu1.png'
      } else if (i === 1) {
        return 'static/morenhuodongtu2.png'
      } else {
        return 'static/morenhuodongtu3.png'
      }
    },
    getActivityStatus (obj) {
      let date = new Date().getTime()
      let str = ''
      let isHas = false
      if (date < obj.signStartTime) {
         str = '活动尚未开始'
      } else if (date > obj.activityStartTime && date < obj.activityEndTime) {
        str = '活动进行中'
        isHas = true
      } else if (date > obj.signStartTime && date < obj.signEndTime) {
        str = '活动报名中'
        isHas = true
      } else if (date > obj.activityEndTime) {
        str = '活动已结束'
      }
      return [str, isHas]
    }
  }
}
</script>

<style lang="less">
</style>
